<template>
  <app-page>
    <mxp-refresh-page ref="mxpRefreshPageRef" :queryData="queryData">
      <view style="padding: 0 15px; padding-top: 15px">
        <view v-if="isReadonly" style="display: flex; justify-content: center; padding: 15px; margin-bottom: 15px; border-radius: 10px">
          <text style="font-size: 48px; font-weight: bold">{{ statusName }}</text>
        </view>
        <mxp-form
          ref="mxpFormRef"
          :model="form"
          itemLabelPosition="top"
          :fromBorderColor="false"
          itemLabelWidth="80px"
          :rules="rules"
          :cusStyle="{ width: '690rpx' }"
        >
          <mxp-form-item :borderColor="false" labelWidth="0px" label="联系电话" prop="phone" :cusStyle="{ marginBottom: `5px` }">
            <mxp-input-number
              v-model="form.phone"
              :background="isReadonly ? '#f2f2f2' : '#ffffff'"
              placeholder="请输入联系电话"
              :cusStyle="{ borderRadius: `10px`, padding: '0px 15px' }"
              :maxlength="11"
              :returnString="true"
              :disabled="isReadonly"
              :inputStyle="{ height: '48px', padding: '0px 0px' }"
              verify="add_int_or_zero"
            ></mxp-input-number>
          </mxp-form-item>
          <mxp-form-item :borderColor="false" labelWidth="0px" prop="applyReason" label="申请理由">
            <mxp-textarea
              v-model="form.applyReason"
              :background="isReadonly ? '#f2f2f2' : '#ffffff'"
              placeholder="请输入申请理由"
              :cusStyle="{ borderRadius: `10px` }"
              :maxlength="500"
              :disabled="isReadonly"
            ></mxp-textarea>
          </mxp-form-item>
          <mxp-form-item v-if="remark && isReadonly" :borderColor="false" labelWidth="0px" label="驳回理由">
            <mxp-textarea
              v-model="remark"
              :background="isReadonly ? '#f2f2f2' : '#ffffff'"
              placeholder=""
              :cusStyle="{ borderRadius: `10px` }"
              :maxlength="500"
              :disabled="isReadonly"
            ></mxp-textarea>
          </mxp-form-item>
        </mxp-form>
        <mxp-button
          :text="isReadonly ? '重新申请' : '立即申请'"
          background="#223aec"
          color="#ffffff"
          font-size="18px"
          :bold="true"
          :loading="loging"
          :disabled="loging"
          :cusStyle="{ height: '48px', width: '690rpx', maxWidth: '400px', marginTop: '15px' }"
          @click="onRegister"
        ></mxp-button>
      </view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpForm, { type $Rules } from '@/mxp-ui/mxp-form/mxp-form.vue';
  import MxpFormItem from '@/mxp-ui/mxp-form-item/mxp-form-item.vue';
  import MxpTextarea from '@/mxp-ui/mxp-textarea/mxp-textarea.vue';
  import MxpInputNumber from '@/mxp-ui/mxp-input-number/mxp-input-number.vue';
  import useMxpToastRefHooks from '@/utils/hooks/useToast';
  import { applyCooperationAxios, queryApplyCooperationResultAxios } from '@/api/cooperation';
  import { getPhoneRules } from '@/utils/page/rules';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh';

  const mxpFormRef = ref<InstanceType<typeof MxpForm> | null>(null);
  const mxpToastRef = useMxpToastRefHooks();
  const loging = ref(false);
  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh);

  const form = reactive({
    phone: '',
    applyReason: '',
  });

  const status = ref<-1 | 0 | 1 | 2>(-1);
  const statusName = computed(() => (status.value === 1 ? '已通过' : status.value === 2 ? '已驳回' : status.value === 0 ? '待审核' : '未知'));
  const isReadonly = computed(() => status.value === 2 || status.value === 0);

  const remark = ref<string>('');
  const { phoneRules } = getPhoneRules();

  const rules: $Rules<typeof form> = {
    phone: phoneRules,
    applyReason: [{ required: true, message: '请输入申请理由', trigger: ['blur', 'change'] }],
  };

  /** 加载数据 */
  async function queryData(ins: Ins) {
    try {
      const res = await queryApplyCooperationResultAxios();
      status.value = res.data?.status ?? -1;
      remark.value = res.data?.remark ?? '';
      form.applyReason = res.data?.applyReason ?? '';
      form.phone = res.data?.phone ?? '';
      ins?.setSuccess();
    } catch (error) {
      ins?.setEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  /**
   * 申请
   */
  async function onRegister() {
    if (isReadonly.value) {
      status.value = -1;
    } else {
      try {
        await mxpFormRef.value?.validate();
        loging.value = true;
        await applyCooperationAxios({ phone: form.phone, applyReason: form.applyReason });
        loging.value = false;
        mxpToastRef.value?.showSuccess('已提交申请,请耐心等待审核');
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      } catch (err) {
        loging.value = false;
        mxpToastRef.value?.showError(Array.isArray(err) && err[0] && err[0].message ? err[0].message : err.msg || '申请失败,-BD0002');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    display: flex;
    flex-flow: column nowrap;

    .item {
      display: flex;
      width: 100%;
      padding: 15px 0;

      .name {
        display: block;
        width: 100px;
        font-size: 14px;
        color: #666666;
      }

      .value {
        font-size: 14px;
        color: #333333;
      }
    }
  }
</style>
